<!--
 * @Author: lijun ahjunshao666@163.com
 * @Date: 2023-08-04 18:04:17
 * @LastEditors: lijun ahjunshao666@163.com
 * @LastEditTime: 2023-08-07 09:26:28
 * @FilePath: \NingxiangElderlyCare\src\components\WorkSpace\ToDoList\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <section class="todo_list">
    <h3>待办事项</h3>
    <div class="tab_wrap">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="待审批（356）" name="first"></el-tab-pane>
        <el-tab-pane label="已驳回（24）" name="second"></el-tab-pane>
        <el-tab-pane label="在线点单（24）" name="third"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="list_wrap">
      <div class="list_item">
        <div class="item_top">
          <div class="icon">
            <icon-info theme="outline" size="24" fill="#1890ff" />
          </div>
          <div class="title">综合运营补贴审批</div>
          <div class="link">
            <icon-arrow-right theme="outline" size="24" fill="#888" />
          </div>
        </div>
        <div class="item_center">内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="item_bottom">
          <el-button type="primary">立即处理</el-button>
        </div>
      </div>
    </div>
    
    
  </section>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style scoped lang="scss">
.todo_list {
  padding: 10px;

  .list_wrap {
    .list_item {
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px #bbb;
      .item_top {
        display: flex;

        .title {
          font-weight: 900;
          flex: 1;
          margin-left: 10px;
        }

        .link {
          cursor: pointer;
        }
      }

      .item_bottom {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}</style>